<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('接口用户列表')" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>主键：</label>
                                <input type="text" name="idInter" id="idInter" th:value="${inter.idInter}" />
                            </li>
                            <li>
                                <label>接口名：</label>
                                <input type="text" name="loginName" th:value="${inter.na}" disabled/>
                            </li>
                            <li th:each="item:${params}" th:attr="value=${item}" name="param" >
                                <label>参数：</label>
                                <input type="text" placeholder="请输入生成业务名" class="input_param"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="queryTableData()"><i class="fa fa-search"></i>提数</a>
                                <a class="btn btn-info btn-rounded btn-sm" onclick="formIsEnabled(true)"><i class="fa fa-edit"></i>编辑</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                    <div class="row">
                        <div class="col-sm-12" style="margin-top: 15px">
                            <button type="button" class="btn btn-white btn-sm" onclick="addRow()"><i class="fa fa-plus"> 增加</i></button>
                            <button type="button" class="btn btn-white btn-sm" onclick="sub.delRow()"><i class="fa fa-minus"> 删除</i></button>
                            <div class="col-sm-12 select-table table-striped">
                                <table id="bootstrap-table"></table>
                            </div>
                        </div>
                    </div>
                </form>


                <div class="row" style="margin-top: 20px">
                    <div class="col-sm-offset-9 col-sm-11">
                        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
                    </div>
                </div>
            </div>

            <!--<div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>-->
        </div>
    </div>
    <th:block th:include="include :: footer" />
     <script th:src="@{/js/jquery.tmpl.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "base/inter/fld";
        var formIsEnabled = function(isEnabled) { //表单是否可用
            if(isEnabled) {
                $("#formId #bootstrap-table").find("input").attr("disabled",false);
                $("#formId #bootstrap-table").find("select").attr("disabled",false);
            } else {
                $("#formId #bootstrap-table").find("input").attr("disabled",true);
                $("#formId #bootstrap-table").find("select").attr("disabled",true);
            }
        };
        function addRow() {
            var count = $("#" + table.options.id).bootstrapTable('getData').length;
            var row = {
                index: $.table.serialNumber(count),
                cd: "",
                na: "",
                sort: 1,
                euValtp:"string"
            }
            sub.addRow(row);
        };
        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#formId').serialize());
                formIsEnabled(false);
            }
        }
        $(function() {
            var paramName;
            $.each($("li[name=param]"),function (index,item) {
                paramName = $(item).attr("value");
                $(item).find("input").attr("name",paramName).attr("placeholder",paramName);
            });
            var options = {
                data: [[${vo.flds}]],
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
                columns: [
                    {
                        field: 'index',
                        align: 'center',
                        title: "行号",
                        formatter: function (value, row, index) {
                            var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                            return columnIndex + $.table.serialNumber(index);
                        }
                    },
                    {
                        field: 'cd',
                        align: 'center',
                        title: '编码',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='flds[%s].cd' value='%s'>", index, value);
                            return html;
                        }
                    },

                    {
                        field: 'na',
                        align: 'center',
                        title: '名称',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='flds[%s].na' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'euValtp',
                        align: 'center',
                        title: '值类型',
                        formatter: function(value, row, index) {
                            var data = [{ index: index, type: value }];
                            return $("#euValtpScript").tmpl(data).html();
                        }
                    },
                    {
                        field: 'sort',
                        align: 'center',
                        title: '序号',
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='flds[%s].sort' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                            return '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\')"><i class="fa fa-remove"></i>删除</a>';
                        }
                    }]
            };
            $.table.init(options);
            formIsEnabled(false);
        });
        function queryTableData() {
            var idInter = $("#idInter").val();
            var paramEles = $("input.input_param");
            var param={"idInter":idInter};
            var sqlParams="{";
            var key,value;
            $.each(paramEles,function (index,item) {
                key = $(item).attr("name");
                value = $(item).val();
                sqlParams += "\""+key+"\":\""+value+"\",";
            });
            if(sqlParams.length>1) {
                sqlParams=sqlParams.substring(0,sqlParams.length-1)+"}";
            } else {
                sqlParams=sqlParams+"}";
            }
            param.param=eval('(' + sqlParams + ')');
            $.ajax({
                url: '/base/inter/preview',
                type: 'post',
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify(param),
                success: function (result) {
                    if(result.code==0) {
                        debugger;
                        var data = result.rows;
                        var tableData=[];
                        if(data.length<1) {
                            return ;
                        }
                        $.each(data[0],function (index,item) {
                            tableData.push({
                                cd: index,
                                na: '',
                                sort:''
                            });
                        });
                        $("#bootstrap-table").bootstrapTable('refreshOptions', {data: tableData});
                        formIsEnabled(true);
                    } else {
                        $.modal.alert(result.msg);
                    }
                }
            });
        };
    </script>
</body>
</html>
<!-- 商品类型 -->
<script id="euValtpScript" type="text/x-jquery-tmpl">
<div>
<select class='form-control' name='flds[${index}].euValtp'>
    <option value="string" >字符</option>
    <option value="int" >整形</option>
    <option value="float">浮点型</option>
</select>
</div>
</script>